<template>
    <div class="list">
        <el-input @change="inclice" v-model="input" placeholder="Please input" />
        <!-- <el-button type="primary" @click="inclice()">搜索</el-button> -->
        <!-- 列表的渲染，已经字段的添加 -->
        <el-table :data="list" style="width: 80%">
            <el-table-column prop="id" label="ID" width="180"/>
            <el-table-column prop="user" label="用户账号" width="180" />
            <el-table-column prop="name" label="名字昵称" width="180" />
            <el-table-column prop="date" label="提交时间" />
            <el-table-column prop="fals" label="是否启用" />
            <el-table-column label="操作" width="120">
                <template #default="scope">
                    <!-- 编辑功能的实现 -->
                    <el-button link type="primary" size="small" @click="bianjiClick(scope.row)">编辑</el-button>
                </template>
                
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="length" @current-change="routsss" :default-current-page="route.query.pageCode && +route.query.pageCode "/>
        <!-- 编辑弹框中数据的回显 -->
        <el-dialog v-model="dialogVisible" title="Tips" width="40%">
			<div>
				<el-row class="row">
					<el-col :span="2">ID:</el-col>
					<el-col :span="22">
						<el-input v-model="form.id" disabled></el-input>
					</el-col>
				</el-row>
				<el-row class="row">
					<el-col :span="2">姓名:</el-col>
					<el-col :span="22">
						<el-input v-model="form.name"></el-input>
					</el-col>
				</el-row>
				<el-row class="row">
					<el-col :span="2">账号:</el-col>
					<el-col :span="22">
						<el-input v-model="form.user"></el-input>
					</el-col>
				</el-row>
				<el-row class="row">
					<el-col :span="2">时间:</el-col>
					<el-col :span="22">
						<el-input v-model="form.date"></el-input>
					</el-col>
				</el-row>
				<el-row class="row">
					<el-col :span="2">性别:</el-col>
					<el-col :span="22">
						<el-radio-group v-model="form.fals">
							<el-radio :label="true" size="large">true</el-radio>
							<el-radio :label="false" size="large">false</el-radio>
						</el-radio-group>
					</el-col>
				</el-row>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
                    <!-- 点击编辑弹框中确定更新数据 -->
					<el-button type="primary" @click="handleClickEdit">确定</el-button>
				</span>
			</template>
		</el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import {useRoute} from 'vue-router'
import { ElMessage } from 'element-plus'
import router from '@/router';
const route=useRoute()
interface listType {
    user: string,
    name: string,
    date: string,
    fals: boolean,
    id: string
}
const list = ref<listType[]>([])
const length=ref<number>()
const page=ref<number>(1)
const input=ref<string>('')
const routsss=(newPageCode:number)=>{
    page.value=newPageCode
    router.push({
        path:'/list',
        query:{
            ...route.query,
            page: newPageCode
        }
    })
    getListAxios()
}
const getListAxios = async () => {
    try {
        const resp = await axios.get('/api/list',{params:{page:page.value}})
        list.value = resp.data.list
        length.value=resp.data.listLength
    } catch (e: any) {
        console.log(e.message)
    }
}
const form=ref({
    user: '',
    name: '',
    date: '',
    fals: false,
    id: ''

})
const dialogVisible=ref<boolean>(false)
const bianjiClick=(row:listType)=>{
    dialogVisible.value=true
    form.value={...row}
}
const handleClickEdit=async()=>{
    const resp=await axios.post('/api/dele',form.value)
    const {code}=resp.data
    if(code===200){
        ElMessage('修改成功')
        getListAxios()
        dialogVisible.value=false
    }
}
const inclice=async(valuse:any)=>{
    try {
        const resp = await axios.get('/api/list',{params:{input:valuse}})
        list.value = resp.data.list
        length.value=resp.data.listLength
    } catch (e: any) {
        console.log(e.message)
    }
}
onMounted(() => {
    getListAxios()
})
</script>
<style lang="scss">
.list {
    width: 100%;
    height: 100%;
}
</style>